<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/project.css">
    <script src="js/main.js" defer></script>
</head>

<body>
    <section id="wrap">
        <!-- 流体布局 -->
        <header id="head">
            <!-- 固定布局 -->
            <!-- 头部 -->
            <div class="headMain">
                <h1 class="logo">
                    <a href="javascript:;">
                        <img src="img/logo.png">
                    </a>
                </h1>
                <div class="music">
                    <audio src="img/audio.mp3" loop autoplay></audio>
                </div>
                <nav class="nav">
                    <ul class="list clearfix">
                        <li>
                            <a href="javascript:;">
                                <div class="up"><img src="img/home_gruen.png"></div>
                                <div class="down"><img src="img/home.png"></div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">Course</div>
                                <div class="down">Course</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">Works</div>
                                <div class="down">Works</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">About</div>
                                <div class="down">About</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">Team</div>
                                <div class="down">Team</div>
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="arrow"></div>
            </div>
        </header>
        <!-- 内容 -->
        <section id="content">
            <ul class="list">
                <li class="home">
                    <section>
                        <ul class="home1">
                            <li class="commonTitle active ">
                                <div class="item">one layer</div>
                            </li>
                            <li class="commonTitle">
                                <div class="item">two layer</div>
                            </li>
                            <li class="commonTitle">
                                <div class="item">three layer</div>
                            </li>
                            <li class="commonTitle">
                                <div class="item">four layer</div>
                            </li>
                        </ul>
                        <ul class="home2">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </section>
                </li>
                <li class="course">
                    <section>
                        <header class="course1 commonTitle">
                            <span>EINIGE</span><br>
                            <span>UNSERER</span><br>
                            <span>KUNDEN</span><br>
                        </header>
                        <div class="course2 commonText">
                            <p>Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen
                                Zusammenarbeit, gleichzeitig aber auch das größte Lob, das man uns entgegenbringen
                                kann.<br>
                                Diese und viele weitere große und kleine Kunden vertrauen uns seit Jahren, was uns stolz
                                macht, und dafür sagen wir an dieser Stelle einfach mal.
                            </p>
                        </div>
                        <div class="course3">
                            <span class="line"></span>
                            <span class="line"></span>
                            <span class="line"></span>
                            <span class="line"></span>
                            <span class="line"></span>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                            <div class="item">
                                <div class="back"></div>
                                <div class="front">测试</div>
                            </div>
                        </div>
                        <div class="plane1"></div>
                        <div class="plane2"></div>
                        <div class="plane3"></div>
                    </section>
                </li>
                <li class="works">
                    <section>
                        <header class="works1 commonTitle">
                            <span>EINBLICK</span><br>
                            <span>ERKENNTNIS</span><br>
                            <span>ERGEBNIS</span><br>
                        </header>
                        <div class="works2">
                            <div class="item">
                                <img src="./img/worksimg1.jpg">
                                <div class="mask">
                                    <span>测试</span>
                                    <div class="icon"></div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./img/worksimg2.jpg">
                                <div class="mask">
                                    <span>测试2</span>
                                    <div class="icon"></div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./img/worksimg3.jpg">
                                <div class="mask">
                                    <span>测试3</span>
                                    <div class="icon"></div>
                                </div>
                            </div>
                            <div class="item">
                                <img src="./img/worksimg4.jpg">
                                <div class="mask">
                                    <span>测试4</span>
                                    <div class="icon"></div>
                                </div>
                            </div>
                        </div>
                        <div class="works3">

                        </div>
                        <div class="pencel1"></div>
                        <div class="pencel2"></div>
                        <div class="pencel3"></div>
                    </section>
                </li>
                <li class="about ">
                    <section>
                        <header class="about1 commonTitle">
                            <span>DIE</span><br>
                            <span>SPEZIELLE</span><br>
                            <span>VIELFALT</span><br>
                        </header>
                        <div class="about2">
                            <p class="commonText">Der bunte Medienmix ist die Faszination die uns antreibt und das, was
                                man an uns schätzt. Von A bis Z und von vorne bis hinten nehmen wir Ihr Projekt unter
                                unsere Fittiche und lassen es zu etwas Großartigem heranwachsen.</p>
                        </div>
                        <div class="about3">
                            <div class="item">
                                <span></span>
                                <ul data-src="./img/about1.jpg"></ul>
                            </div>
                            <div class="item">
                                <span></span>
                                <ul data-src="./img/about3.jpg"></ul>
                            </div>
                        </div>
                        <div class="line"></div>
                    </section>
                </li>
                <li class="team">
                    <section>
                        <header class="team1 commonTitle">
                            <span>WIR SIND</span><br>
                            <span>VOXELAIR</span><br>
                        </header>
                        <div class="team2">
                            <p class="commonText">
                                Wir sind seit 2002 eine Full-Service-Werbeagentur mit Stammsitz in Heimsheim, zwischen
                                Stuttgart und Karlsruhe.
                            </p>
                            <p class="commonText">
                                Über 60 Jahre Erfahrung vereinen das gesamte VoxelAir-Team. Dabei hat jedes Voxel neben
                                professionellem Allroundwissen auch sein ganz spezielles Gebiet, um selbst die
                                individuellsten Kundenwünsche schnell und kompetent umzusetzen.
                            </p>
                        </div>
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </section>
                </li>
            </ul>
            <ul class="dot">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </section>
    </section>
</body>

</html>